<template>
	<div>
		<div class="foot-box">
			<div class="foot-regard">
				<div class="regardList">
					<div v-for="(item, index) in regard" :key="index">
						<span class="regard-name">{{ item.name }}</span>
						<div
							v-for="(items, indexa) in item.list"
							:key="indexa"
							class="regard-two">
							{{ items.value }}
						</div>
					</div>
				</div>
				<div>
					<el-image :src="footImage" class="foot-image" />
				</div>
			</div>

			<div class="regard-record">
				<span class="regard-company"
					>Copyright © 2013-2024 XXXXX信息技术有限公司 京公网安备
					11010802028637号</span
				>
				<div class="regard-metroplis">
					京ICP证041626号 | 京ICP备09083730号-8
				</div>
			</div>
		</div>
	</div>
</template>
<script setup>
	import { ref, defineProps } from "vue";
	import titleText from "@/assets/titleText.png";
	import footImage from "@/assets/footImage.png";
	// tel:xО4О4О4О4小小
	// e-mal:zhuchangwuyeu@cods,com
	// 周一至周五 09-30-19-00

	const props = defineProps({});
	const regard = ref([
		{
			name: "关于驻场无忧",
			list: [
				{ value: "公司介绍" },
				{ value: "公司案例" },
				{ value: "公司新闻" }
			]
		},
		{
			name: "常见问题",
			list: [
				{ value: "项目如何报价" },
				{ value: "如何发布项目需求" },
				{ value: "查看更多>>" }
			]
		},
		{
			name: "联系方式",
			list: [
				{ value: " tel：0808151858" },
				{ value: "e-mal:zhuchangwuyeu@cods,com" },
				{ value: "周一至周五 09-30-19-00" }
			]
		}
	]);
</script>
<style lang="scss" scoped>
	.foot-box {
		// width: 100%;
		// position: fixed;
		// left: 0; /* 固定在左边 */
		// bottom: 0; /* 固定在底部 */
		//   position: absolute;
		//   bottom: 0;
		//   height: 200px;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
		background-image: url("@/assets/foot.png");
		padding: 56px 0 10px 0;
		margin-top: 0;
	}

	.foot-regard {
		margin: auto;
		width: 1202px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.regardList {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 140px;
	}
	.regard-name {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 16px;
		color: #165dff;
		line-height: 19px;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
	.regard-two {
		margin-top: 12px;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 16px;
		color: #86909c;
		text-align: left;
		font-style: normal;
		text-transform: none;
		cursor: pointer;
	}
	.regard-record {
		padding-top: 64px;
		line-height: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	.regard-company {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 16px;
		color: #333333;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
	.regard-metroplis {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 16px;
		color: #333333;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
	.foot-image{
		width:194px;
		height: 58px;
	}
</style>
